<template>
  <div class="job-wanted">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" left-text="家政求职" left-arrow @click-left="$router.back()" />

    <div class="main">
      <van-cell class="title"><h2>做家政</h2></van-cell>
      <van-form ref="JobWantedForm">
        <van-field v-model="formData.name" name="name" label="姓名" :rules="rules.name" placeholder="请填写姓名" />
        <van-field v-model="formData.mobile" name="mobile" label="电话号码" :rules="rules.mobile" placeholder="请填写电话号码" />
        <toggle-tag :showTitle="'意向岗位'" :tag-list="Company.occupation" :tag-data="formData.intentionPost" @pushTag="pushPost" @spliceTag="splicePost" />
        <toggle-tag :showTitle="'已获证书'" :tag-list="Company.certificate" :tag-data="formData.certificate" @pushTag="pushTag" @spliceTag="spliceTag" />
        <van-field v-model="formData.nativePlace" name="nativePlace" label="籍贯" :rules="rules.nativePlace" placeholder="请填写籍贯" />
        <van-field v-model="formData.residence" name="residence" label="现居地" placeholder="请填写现居地" />
        <van-field
          v-model="formData.intention"
          readonly
          clickable
          name="intention"
          label="意向家政公司"
          placeholder="请选择意向家政公司"
          @click="showPicker = true"
          :rules="rules.intention"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>

        <van-field v-model="formData.remarks" name="remarks" placeholder="请填写备注信息" type="textarea" rows="3" label="备注信息" />
        <van-button block type="info" class="btn" @click="submit">提交资料</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import Company from '@/api/constant/company'
import { getCompanys } from '@/api/company'
import { validEmptyString } from '@/utils/config'

export default {
  name: 'JobWanted',
  data () {
    return {
      Company,
      formData: {
        name: '', // 姓名
        mobile: '', // 手机号码
        intentionPost: [], // 意向岗位
        certificate: [], // 已获证书
        nativePlace: '', // 籍贯
        residence: '', // 居住地
        intention: '', // 意向家政公司
        remarks: '' // 备注
      },
      rules: {
        name: [{ required: true, message: '请填写姓名' }],
        mobile: [
          { required: true, message: '请填写电话号码' },
          { pattern: /^1[3-9]\d{9}$/, message: '电话号码格式不正确' }
        ],
        intention: [{ required: true, message: '请选择意向家政公司', trigger: 'onChange' }]
      },
      showPicker: false,
      columns: []
    }
  },
  created () {
    this.loadCompanys()
  },
  mounted () {},
  methods: {
    async loadCompanys () {
      const companys = await getCompanys()
      this.columns = companys.map(item => item.companyName)
    },
    async submit () {
      try {
        validEmptyString(this.formData)
        await this.$refs.JobWantedForm.validate()
        this.$toast.loading({
          message: '提交中...', // 展示时的提示信息
          forbidClick: true, // 展示时, 静止点击背景
          duration: 0 // toast 展示时间 默认为2秒, 0 表示持续展示
        })
        console.log(this.formData)
        this.$toast.success('提交资料成功')
        this.$router.back()
      } catch (error) {
        console.log(error)
      }
    },
    pushPost (item) {
      this.formData.intentionPost.push(item.name)
    },
    splicePost (index, value) {
      this.formData.intentionPost.splice(index, value)
    },
    pushTag (item) {
      this.formData.certificate.push(item.name)
    },
    spliceTag (index, value) {
      this.formData.certificate.splice(index, value)
    },
    // 弹出层取消
    onCancel () {
      this.showPicker = false
    },
    // 弹出层确认
    onConfirm (value) {
      this.formData.intention = value
      this.showPicker = false
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/styles/from.less';
.job-wanted {
  padding-bottom: 88px;
}
</style>
